import React, { ReactElement, useState, useEffect, useRef } from 'react';

// 引入 antd
import { Table, Switch, Space, Button, message, Tag, Tree } from 'antd';

// 引入 antd pro
import ProForm, {
  DrawerForm,
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
  QueryFilter,
  ProFormDatePicker,
} from '@ant-design/pro-form';
import { PlusOutlined } from '@ant-design/icons';

// 引入子组件
import AddMenu from './components/AddMenu';
import UpdateMenu from './components/UpdeteMenu';

// 引入 api
import { getMenu, menu, deleteMenu } from '../../../api/menu';

// 表格配置
const columns = [
  {
    title: '名称',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '类型',
    width: '12%',
    render: (val: any) =>
      val.type === '0' ? (
        <Tag color="blue">菜单</Tag>
      ) : (
        <Tag color="red">按钮</Tag>
      ),
  },
  {
    title: '图标',
    dataIndex: 'icon',
    key: 'address',
  },
  {
    title: '地址',
    dataIndex: 'path',
    key: 'address',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'address',
  },
  {
    title: '修改时间',
    dataIndex: 'modifyTime',
    key: 'address',
  },
  {
    title: '操作',
    render: (val: any) => {
      return (
        <>
          <Button
            type="primary"
            style={{ margin: '0px 15px' }}
            onClick={() => DLE_MENU(val)}
          >
            删除
          </Button>
          <UpdateMenu menuItem={val}></UpdateMenu>
        </>
      );
    },
  },
];

// rowSelection objects indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys: any, selectedRows: any) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows,
    );
  },
  onSelect: (record: any, selected: any, selectedRows: any) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected: any, selectedRows: any, changeRows: any) => {
    console.log(selected, selectedRows, changeRows);
  },
};

interface Props {}

type TableListItem = {
  id: string;
  title: string;
  key: string;
  icon: string;
  createTime: string;
};

// 删除菜单
const DLE_MENU = async (val: any) => {
  const res = await deleteMenu(val.id);
  console.log(res);

  if (res.status === 200) {
    message.success('删除成功');
  } else {
    message.success('删除失败');
  }
};

export default function index({}: Props): ReactElement {
  // 初始化一级菜单
  const [tableListDataSource, setTableListDataSource] = useState<
    Array<TableListItem>
  >([]);

  // 初始化
  useEffect(() => {
    initData();
  }, []);
  // 获取数据
  const initData = async () => {
    const res = await getMenu();
    console.log(res, 'sss');

    setTableListDataSource(() => {
      return [...res.data.rows.children];
    });
  };

  return (
    <>
      <QueryFilter
        defaultCollapsed
        onFinish={async (values) => {
          const res = await getMenu('', { ...values });
          console.log(res.data.rows.children, 'values');
          // setTableListDataSource(() => {
          //   return [...res.data.rows.children];
          // });
        }}
      >
        <ProFormText name="menuName" label="菜单名称" />
        <ProFormDatePicker name="createTimeFrom" label="创建时间" />
        <ProFormText name="type" label="应用状态" />
      </QueryFilter>

      <Space align="center" style={{ marginBottom: 16 }}>
        {/* 右侧新增 树形菜单初始	 */}
        <AddMenu></AddMenu>
      </Space>

      <Table
        columns={columns}
        // rowSelection={{ ...rowSelection, checkStrictly }}
        dataSource={tableListDataSource}
      />
    </>
  );
}
